<template>
	<view>
		<uni-nav-bar background-color="" class="nav" statusBar :border="false" left-icon="back" tit title="分销员信息"
			@clickLeft="goback"></uni-nav-bar>
		<view class="mine_top">
			<image class="imgs" src="/static/mine/bjj.png" mode="aspectFill"></image>
			<view class="top_box">
				<view class="img_flex">
					<view class="texts">
						<view class="tflex">
							<view class="t1">{{userInfo.distribution.name}}</view>
							<view class="t2">分销员</view>
						</view>
						<view class="phone">
							手机号：<span>{{userInfo.distribution.phone}}</span>
						</view>
					</view>
					<image v-if="userInfo.avatar" :src="http+userInfo.avatar" mode="aspectFill"></image>
					<image v-else src="/static/tou.jpg" mode="aspectFill"></image>
				</view>
				<view class="xs"></view>
				<view class="texts_flex">
					<view class="items">
						身份证号：<span>{{userInfo.distribution.id_card}}</span>
					</view>
					<view class="items">
						所在地区：<span>{{userInfo.distribution.address}}</span>
					</view>
				</view>
				<view class="xs"></view>
				<view class="texts_flex">
					<view class="items">
						佣金卡：<span>{{userInfo.distribution.bank_card}}</span>
					</view>
					<view class="items">
						开户行：<span>{{userInfo.distribution.bank_name}}</span>
					</view>
				</view>
			<!-- 	<view class="yh">
					<image src="/static/ce.jpeg" mode=""></image>
				</view>
				<view class="yh_flex">
					<image src="/static/ce.jpeg" mode=""></image>
					<image src="/static/ce.jpeg" mode=""></image>
				</view> -->
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{},
				http: this.$httpimg,
			};
		},
		onLoad() {
			this.$post('user/index', {
				mid: uni.getStorageSync('msg').id
			}).then(res => {
				if (res.code == 0) {
					this.userInfo = res.data
					uni.setStorageSync('msg', res.data)
				}
			})
		},
		methods:{
			goback(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F8F8F8;
	}
	.nav {
		width: 100%;
		position: absolute;
		top: 0%;
		z-index: 9;
	}
	.mine_top{
		position: relative;
		.imgs {
			width: 100%;
			height: 350rpx;
			position: relative;
		}
		.top_box{
			width: 700rpx;
			background: linear-gradient( 270deg, #FFF1EA 0%, #FFFFFF 50%, rgba(255,241,234,0.87) 100%);
			box-shadow: 0rpx 8rpx 16rpx 0rpx #FFE7DB, inset 0rpx 0rpx 14rpx 8rpx rgba(255,255,255,0.5);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid #FFFFFF;
			margin: -130rpx auto;
			position: relative;
			padding: 40rpx 30rpx;
			box-sizing: border-box;
			.xs{
				width: 100%;
				height: 1rpx;
				background-color: #F5DFCF;
				margin: 36rpx auto;
			}
			.img_flex{
				display: flex;
				align-items: center;
				justify-content: space-between;
				image{
					width: 108rpx;
					height: 108rpx;
					border-radius: 60rpx;
					box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(255,116,22,0.37);
					border: 4rpx solid #FFFFFF;
				}
				.texts{
					.tflex{
						display: flex;
						align-items: center;
					}
					.t1{
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 40rpx;
						color: #000000;
					}
					.t2{
						margin-left: 25rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
						background: linear-gradient( 133deg, #FE7444 0%, #FFA568 100%);
						border-radius: 6rpx;
						line-height: 36rpx;
						padding: 0 10rpx;
					}
					.phone{
						margin-top: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #979797;
						span{
							color: #FF7416;
						}
					}
				}
			}
			
			.texts_flex{
				.items{
					margin-bottom: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #979797;
					span{
						color: #000;
					}
				}
			}
			.yh{
				image{
					width: 300rpx;
					height: 200rpx;
				}
			}
			.yh_flex{
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				image{
					width: 300rpx;
					height: 200rpx;
				}
			}
			
			
		}
	}
	
</style>